<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .con
        {background-color: rgb(142, 148, 142);
            width: 100%;  
        }
        a{
         text-decoration: none;   
         color: inherit;
        }
        .m-menu{
            list-style: none;
            padding: 0;
        }
        .logo{
            width: 100px;
            height: 0;
            margin-left: 25%;
       }
        .zhuti::after{
            content: "";
            display: table;
            clear: both;
        }
       .menu-li{
            float: left;
            position: relative;
            margin-left: 1em;
        }
        .menu-zi{
            display: none;
            position: absolute;
            background-color: ;
           /* border: 1px rgb(232, 4, 4) solid;
            background-color: rgb(255, 109, 12);
            width: 300px;
            height: 300px;*/
        }
        .submenu-link{
            display: block;
            text-decoration: none;
            text-align: left;
            line-height: 2em;
        }
        .menu-link:hover .menu-zi{
            display:block ;
        }

  

    </style>
</head>
<body>
    <div class="con zhuti">
        <a href="" class="logo">
            <img src="./midea-logo-cn.png" alt="" width="100px" >
        </a>
        <div class="menu-list">
        <ul class="m-menu">
            <li class="menu-item" title="美的业务">
                <div class="menu-li">
                    <a href="" class="menu-link">美的业务</a>
                </div>
                <ul class="menu-zi">
                    <li class="submenu-item">
                        <a href="" class="submenu-link">总览</a>
                    </li>
                    <li class="submenu-item">
                        <a href="" class="submenu-link">智能家居</a>
                    </li>
                    <li class="submenu-item">
                        <a href="" class="submenu-link">工业技术</a>
                    </li>
                    <li class="submenu-item">
                        <a href="" class="submenu-link">楼宇科技</a>
                    </li>
                    <li class="submenu-item">
                        <a href="" class="submenu-link">机器人自动化</a>
                    </li>
                    <li class="submenu-item">
                        <a href="" class="submenu-link">数字化创新</a>
                    </li>
                </ul>
            </li>
            <li class="menu-item" title="投资者关系">
                <div class="menu-li">
                    <a href="" class="menu-link">投资者关系</a>
                </div>
                <ul class="menu-zi">
                    <li class="submenu-item">
                        <a href="" class="submenu-link">总览</a>
                    </li>
                    <li class="submenu-item">
                        <a href="" class="submenu-link">致股东的信</a>
                    </li>
                    <li class="submenu-item">
                        <a href="" class="submenu-link">公司治理</a>
                    </li>
                    <li class="submenu-item">
                        <a href="" class="submenu-link">股票信息</a>
                    </li>
                    <li class="submenu-item">
                        <a href="" class="submenu-link">财务报告</a>
                    </li>
                </ul>
            </li>
            <li class="menu-item" title="美的商城">
                <div class="menu-li">
                    <a href="" class="menu-link">美的商城</a>
                </div>
            </li>
            <li class="menu-item" title="美的美居">
                <div class="menu-li">
                    <a href="" class="menu-link">美的美居</a>
                </div>
            </li>
            <li class="menu-item" title="美的服务">
                <div class="menu-li">
                    <a href="" class="menu-link">美的服务</a>
                </div>
            </li>
            <li class="menu-item" title="加入美的">
                <div class="menu-li">
                    <a href="" class="menu-link">加入美的</a>
                </div>
                <ul class="menu-zi">
                    <li class="submenu-item">
                        <a href="" class="submenu-link">总览</a>
                    </li>
                    <li class="submenu-item">
                        <a href="" class="submenu-link">工作在美的</a>
                    </li>
                    <li class="submenu-item">
                        <a href="" class="submenu-link">美的文化</a>
                    </li>
                    <li class="submenu-item">
                        <a href="" class="submenu-link">职业发展</a>
                    </li>
                    <li class="submenu-item">
                        <a href="" class="submenu-link">社会招聘</a>
                    </li>
                    <li class="submenu-item">
                        <a href="" class="submenu-link">应届毕业生招聘</a>
                    </li>
                    <li class="submenu-item">
                        <a href="" class="submenu-link">博士生招聘</a>
                    </li>
                </ul>
            </li>
            <li class="menu-item" title="关于美的">
                <div class="menu-li">
                    <a href="" class="menu-link">关于美的</a>
                </div>
                <ul class="menu-zi">
                    <li class="subemnu-item">
                        <a href="" class="submenu-link">总览</a>
                    </li>
                    <li class="submenu-item">
                        <a href="" class="submenu-link">创新</a>
                    </li>
                    <li class="submenu-item">
                        <a href="" class="submenu-link">制造</a>
                    </li>
                    <li class="submenu-item">
                        <a href="" class="submenu-link">新闻中心</a>
                    </li>
                </ul>
            </li>
            <li class="menu-item" title="美的供应商">
                <div class="menu-li">
                    <a href="" class="submenu">美的供应商</a>
                </div>
            </li>
            <li class="menu-item">
                <div class="menu-li">
                    <img src="./china.png" alt="">
                </div>
            </li>
        </ul>
    </div>
        
    </div>
    <h2 class="pop-menu">美的业务
        <div class="menu section-menu">
            <a href="" class="text-menu">总览</a>
            <a href="" class="text-menu">智能家居</a>
            <a href="" class="text-menu">工业技术</a>
        </div>
    </h2>
</body>
</html>